<template>
  <div class="box-menjin">
    <div class="menjin1">
      <div ref="warp" style="width: 100%; height: 100%"></div>
    </div>
    <div class="menjin2">
      <div class="menjin3">
        <div class="man">男生</div>
        <div class="min">女生</div>
      </div>
      <div class="menjin4">
        <div class="shuju">332</div>
        <div class="shuju">332</div>
        <div class="shuju">332</div>
      </div>
      <div class="menjin5">
        <div class="shuju1">D区宿舍楼</div>
        <div class="shuju1">E区宿舍楼</div>
        <div class="shuju1">F区宿舍楼</div>
      </div>
      <div class="menjin6">
        <div class="hengx"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const value = 65.3;
const splitLineLength = "19%";
const splitLineDistance = -2;
const splitLineWidth = 9;
const int = value.toFixed(1).split(".")[0];
const float = value.toFixed(1).split(".")[1];
const option = ref({
  title: {
    text: "{a|" + int + "}{b|." + float + "%}\n{c|" + "}",
    x: "center",
    y: "center",
    textStyle: {
      rich: {
        a: {
          fontSize: 30,
          color: "#fff",
          fontWeight: "600",
        },
        b: {
          fontSize: 20,
          color: "#fff",
          padding: [2, 0, 0, 0],
        },
        c: {
          fontSize: 22,
          color: "#96A2BC",
          padding: [2, 0, 0, 0],
        },
      },
    },
  },

  series: [
    {
      type: "pie",
      radius: ["86%", "70%"],
      silent: true,
      clockwise: true,
      startAngle: -35,
      z: 0,
      zlevel: 0,

      data: [
        {
          value: value,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(58, 183, 255, 1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(102, 188, 238, 1)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          label: {
            show: false,
          },
        },
        {
          value: 100 - value,
          label: {
            show: false,
          },
          itemStyle: {
            normal: {
              color: "rgba(15, 31, 52,1)",
            },
          },
        },
      ],
    },
    {
      name: "",
      type: "gauge",
      radius: "88%",
      center: ["50%", "50%"],
      startAngle: 0,
      endAngle: 360,
      splitNumber: 60,
      hoverAnimation: true,
      axisTick: {
        show: false,
      },
      splitLine: {
        length: splitLineLength,
        distance: splitLineDistance,
        lineStyle: {
          width: splitLineWidth,
          color: "#000",
        },
      },
      axisLabel: {
        show: false,
      },
      pointer: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
  ],
});
let warp = ref("");
let myChart;
onMounted(() => {
  myChart = echarts.init(warp.value);
  option && myChart.setOption(option.value);
});
window.addEventListener("resize", function () {
  myChart.resize();
});
</script>
<style scoped>
.box-menjin {
  width: 100%;
  height: 100%;
  display: flex;
}
.menjin1 {
  width: 1rem;
  height: 1rem;
}
.menjin2 {
  width: 1.5rem;
  height: 1rem;
}
.menjin3 {
  width: 1.5rem;
  height: 0.25rem;
  display: flex;
}
.man {
  width: 0.75rem;
  height: 0.25rem;
  line-height: 0.25rem;
  text-align: center;
  color: #fff;
}
.min {
  width: 0.75rem;
  height: 0.25rem;
  line-height: 0.25rem;
  text-align: center;
  color: #fff;
}
.menjin4 {
  width: 1.5rem;
  height: 0.25rem;
  display: flex;
}
.shuju {
  width: 0.5rem;
  height: 0.25rem;
  text-align: center;
  line-height: 0.25rem;
  color: #fff;
}
.menjin5 {
  width: 1.5rem;
  height: 0.25rem;
  display: flex;
}
.shuju1 {
  width: 0.5rem;
  height: 0.25rem;
  text-align: center;
  line-height: 0.25rem;
  color: #fff;
}
.menjin6 {
  width: 1.5rem;
  height: 0.25rem;
}
.hengx {
  width: 1.5rem;
  height: 0.03rem;
  background-color: #fff;
}
</style>